Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add active class to link #1960

Closed
wants to merge 2 commits into from
Closed

Add active class to link #1960

wants to merge 2 commits into from

Conversation

timneutkens
Copy link
Member

@timneutkens timneutkens commented May 13, 2017 •
edited
Loading

Fixes #141

active-link

Adds active class to a <Link> component if the current route matches the href property.
Since we clone the <a> inside of the <Link> component it can be scope-styled using styled-jsx without any modifications.

import Link from 'next/link'
export default () => (
  <div>
    Hello World.
    <Link href='/about'><a>About</a></Link>
    <Link href='/'><a>Home</a></Link>
    <style jsx>{`
      a.active {
        color: red;
      }
    `}</style>
  </div>
)

@timneutkens timneutkens requested a review from arunoda May 13, 2017 15:17
@sedubois
Copy link
Contributor

Looks great! I don't know much about this, but will it also work if URL parameters are in a different order?

@arunoda
Copy link
Contributor

arunoda commented May 13, 2017 •
edited
Loading

This is not how we want to do this.
We need to expose our next/router API to be accessible on everywhere.

With a utility like:

import { withRouter } from 'next/router'

@arunoda arunoda closed this May 13, 2017
@arunoda arunoda removed their request for review May 13, 2017 23:40
@timneutkens
Copy link
Member Author

@arunoda I like that solution way more 👌 Thaaaaaanks 😉

@arunoda arunoda mentioned this pull request May 21, 2017
Closed
@timneutkens timneutkens deleted the active-link branch October 23, 2017 18:43
@lock
Copy link

lock bot commented May 10, 2018

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.

@lock lock bot locked as resolved and limited conversation to collaborators May 10, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@timneutkens @sedubois @arunoda